<template>
  <div class="undertab">
    <!-- <div> -->
    <!-- <img :src="img[0].src1" alt=""> -->
    <router-link to="/">
      <div @click="cho11" :class="[cho1 == false ? 'active' : '']">
        <img src="../assets/images/index.png" alt="" v-if="cho1" />
        <img src="../assets/images/index_active.png" alt="" v-if="!cho1" />
        <p>主页</p>
      </div>
    </router-link>
    <router-link to="/university">
      <div @click="cho12" :class="[cho2 == true ? 'active' : '']">
        <img src="../assets/images/university.png" alt="" v-if="!cho2" />
        <img src="../assets/images/university_active.png" alt="" v-if="cho2" />
        <p>大学</p>
      </div>
    </router-link>
    <router-link to="/target">
      <div @click="cho13" :class="[cho3 == true ? 'active' : '']">
        <img src="../assets/images/target.png" alt="" v-if="!cho3" />
        <img src="../assets/images/target_active.png" alt="" v-if="cho3" />
        <p>目标</p>
      </div>
    </router-link>
    <router-link to="/login">
      <div @click="cho14" :class="[cho4 == true ? 'active' : '']">
        <img src="../assets/images/my.png" alt="" v-if="!cho4" />
        <img src="../assets/images/my_active.png" alt="" v-if="cho4" />
        <p>个人</p>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      // img:[{src1:"../assets/images/my.png"}]
      cho1: false,
      cho2: false,
      cho3: false,
      cho4: false,
    };
  },
  methods: {
    //四个底部标签跳转以及图片的切换
    cho11(event) {
      // console.log(this.cho1,this.cho2,this.cho3,this.cho4);
      this.cho1 = false;
      this.cho2 = false;
      this.cho3 = false;
      this.cho4 = false;
      this.$store.dispatch("asyncUpdataUnder",{cho1:this.cho1,cho2:this.cho2,cho3:this.cho3,cho4:this.cho4});
      // console.log(this.$store);
    },
    cho12() {
      // console.log(this.cho1,this.cho2,this.cho3,this.cho4);
      this.cho1 = true;
      this.cho2 = true;
      this.cho3 = false;
      this.cho4 = false;
      this.$store.dispatch("asyncUpdataUnder",{cho1:this.cho1,cho2:this.cho2,cho3:this.cho3,cho4:this.cho4});
    // console.log(this.$store);
    },
    cho13() {
      // console.log(this.cho1,this.cho2,this.cho3,this.cho4);
      this.cho1 = true;
      this.cho2 = false;
      this.cho3 = true;
      this.cho4 = false;
      this.$store.dispatch("asyncUpdataUnder",{cho1:this.cho1,cho2:this.cho2,cho3:this.cho3,cho4:this.cho4});
    // console.log(this.$store);
    },
    cho14() {
      // console.log(this.cho1,this.cho2,this.cho3,this.cho4);
      this.cho1 = true;
      this.cho2 = false;
      this.cho3 = false;
      this.cho4 = true;
      this.$store.dispatch("asyncUpdataUnder",{cho1:this.cho1,cho2:this.cho2,cho3:this.cho3,cho4:this.cho4});
    //   console.log(this.$store);
    },
    tabBase(){
      // console.log(this.$store);
      this.cho1 = this.$store.getters.getUnder.cho1;
      this.cho2 = this.$store.getters.getUnder.cho2;
      this.cho3 = this.$store.getters.getUnder.cho3;
      this.cho4 = this.$store.getters.getUnder.cho4;
    },
    saveState(){
      window.sessionStorage.setItem('tab',JSON.stringify(this.$store.state.under))
    }
  },
  mounted() {
    window.addEventListener('unload',this.saveState)
    this.tabBase()
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.undertab {
  width: 100%;
  height: 10vh;
  background-color: white;
  position: fixed;
  bottom: 0;
  display: flex;
  font-weight: bold;
  font-size: 14px;
  // border-top-left-radius: 10px;
  // border-top-right-radius: 10px;
  div {
    box-sizing: border-box;
    width: 25vw;
    margin-top: 10px;
    img {
      width: 8vw;
      height: 8vw;
      max-width: 60px;
      max-height: 60px;
      min-height: 30px;
      min-width: 30px;
    }
  }
  div:hover {
    cursor: pointer;
  }
}
.active {
  color: rgb(18, 150, 219);
}
p {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: black;
  // 清除长按高亮
  -webkit-tap-highlight-color: transparent;
}
</style>
